<template>
  <component 
    v-show="context.show"
    :context="context" 
    :tagging="currentTagging" 
    :style="currentTaggingStyle"
    :is="currentTaggingComponentName">
  </component>
</template>

<script>
import components from './index.js'
export default {
  components,
  props: {
    context: {}
  },
  computed: {
    currentTagging() {
      return this.context.layer && this.context.layer.tagging || {}
    },
    currentTaggingComponentName() {
      return 'mx-tagging-text'
    },
    currentTaggingStyle() {
      let position = this.context.currentCenterPosition
      if (!position) {
        return { display: 'none' }
      } else {
        return {
          position: 'absolute',
          left: `${position.x}px`,
          top: `${position.y}px`
        }
      }
    }
  }
}
</script>
